<template>
  <div class="detailselect b_margin" v-if="datas">
    <van-cell is-link @click="showPopup">
      <p>请选择：{{isGuige?'颜色，尺寸':'规格'}}</p>
    </van-cell>

    <van-popup round v-model="show" position="bottom">
      <div class="content">
        <div class="top">
          <div class="img">
            <img :src="curImg" alt />
          </div>
          <p class="price">{{price_s|showPrice}}</p>
          <p class="kucun">库存：{{curKucun}}</p>
          <p class="xiaoliang">销量：{{curXiaoliang}}</p>
          <p class="select">选择：{{curSelect}}</p>
        </div>
        <div class="content">
          <div v-if="isGuige">
            <div class="color">
              <p class="title">颜色</p>
              <p class="content clearfix">
                <span
                  v-for="(item,index) in datas.color"
                  :key="item.id"
                  :class="{cur:curColor==index}"
                  @click="curColor=index"
                >{{item.color}}</span>
              </p>
            </div>
            <div class="size">
              <p class="title">尺码</p>
              <p class="content clearfix">
                <span
                  v-for="(item,index) in datas.size"
                  :key="item.id"
                  :class="{cur:curSize==index}"
                  @click="curSize=index"
                >{{item.size}}</span>
              </p>
            </div>
          </div>
          <div class="guige" v-else>
            <p class="title">规格</p>
            <p class="content clearfix">
              <span
                v-for="(item,index) in datas.guige"
                :key="item.id"
                :class="{cur:curGuige==index}"
                @click="curGuige=index"
              >{{item.title}}</span>
            </p>
          </div>
          <div class="num">
            <p class="title">数量</p>
            <van-stepper v-model="num" />
          </div>
        </div>
      </div>
      <div class="bottom">
        <van-goods-action>
          <van-goods-action-button type="warning" text="加入购物车" @click.native="add" />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "DetailSelect",
  props: {
    datas: {
      type: Object
    },
    baseInfo: {
      type: Object
    }
  },
  data() {
    return {
      show: false,
      curColor: 0,
      curGuige: 0,
      curSize: 0,
      num: 1
    };
  },
  computed: {
    isGuige() {
      return this.datas.guige.length ? false : true;
    },
    price_s() {
      return this.baseInfo.price * this.baseInfo.discount * 0.1;
    },
    curImg() {
      if (this.datas.color&&this.datas.color.length) {
        return this.datas.color[this.curColor].img;
      } else if (this.datas.guige&&this.datas.guige.length) {
        return this.datas.guige[this.curGuige].img;
      }
    },
    curKucun() {
      if (this.datas.color&&this.datas.color.length) {
        return this.datas.color[this.curColor].kucun;
      } else if (this.datas.guige&&this.datas.guige.length) {
        return this.datas.guige[this.curGuige].kucun;
      }
    },
    curXiaoliang() {
      if (this.datas.color&&this.datas.color.length) {
        return this.datas.color[this.curColor].xiaoliang;
      } else if (this.datas.guige&&this.datas.guige.length) {
        return this.datas.guige[this.curGuige].xiaoliang;
      }
    },
    curSelect() {
      if (
        this.datas.color &&
        this.datas.color.length &&
        this.datas.size &&
        this.datas.size.length
      ) {
        return (
          this.datas.color[this.curColor].color +
          "/" +
          this.datas.size[this.curSize].size
        );
      } else {
        return this.datas.guige[this.curGuige].title;
      }
    }
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    // let sql = `INSERT INTO goods_cart VALUES (NULL,${req.body.uid},${req.body.gid},${req.body.select},1,${req.body.img},${req.body.num})`;
    add() {
      if (this.$store.state.uid) {
        this.$axios({
          url: "/addcart",
          method: "post",
          data: {
            uid: this.$store.state.uid,
            gid: this.baseInfo.id,
            select: this.curSelect,
            img: this.curImg,
            num: this.num
          }
        }).then(res => {
          this.$store.dispatch("updateCart");
          this.show = false;
          console.log(res);
        });
      } else {
        this.$dialog
          .confirm({
            message: "你还没登录噢~~~",
            cancelButtonText: "去登录",
            confirmButtonText: "继续浏览"
          })
          .then(() => {})
          .catch(() => {
            this.$router.push("/login");
          });
      }
    }
  },
  created() {
    this.$bus.$on("open", () => {
      this.showPopup();
    });
  }
};
</script>

<style lang="less" scoped>
.detailselect {
  .van-cell {
    padding: 10px;
  }
  .van-popup {
    overflow: visible;
    padding-bottom: 40px;
    > .content {
      padding: 10px;
      .top {
        position: relative;
        padding-left: 110px;
        font-size: 16px;
        margin-bottom: 10px;
        .img {
          width: 100px;
          position: absolute;
          left: 0;
          bottom: 0;

          img {
            width: 100%;
          }
        }
        .price {
          font-size: 24px;
        }
      }
      > .content {
        .title {
          padding: 10px 0;
          color: rgba(0, 0, 0, 0.5);
        }
        .content {
          span {
            float: left;
            border: 1px solid rgba(0, 0, 0, 0.3);
            margin-right: 10px;
            padding: 3px;
            margin-bottom: 5px;
          }
          .cur {
            border: 1px solid red;
            color: red;
          }
        }
      }
    }
  }
}
</style>